<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue组件-自定义事件基础</title>
    <!-- 自定义事件的三个作用！！！！如下！！ -->
    <!-- 
        1.父组件向子组件传递方法属性methods 
        2.子组件自有数据向父组件传递 
        3.子组件通过$emit("xxx",xxx)修改父组件的原有数据
     -->
    
    <!-- 参考 E:\编程\前端基础练习\Vue_学习\vuejs_learning_demo_01\Vue笔记_代码\02. 组件-笔记\03. 自定义事件.md -->
</head>
<body>
    
    <div id="app01">
        <father></father>  
    </div>
    
    <script src="vue.js"></script>
    <script>
        // 父组件father
        Vue.component('father',{
            // @sayHello="sayHello" 可采取同名命名，也可不同
            template:`
            <div id="app">

                <h1>1.父组件向子组件传递方法属性methods</h1>
                father: <button @click="sayHello">click me say hello</button><br>               
                child01: <child01 @sayHello="sayHello"></child01>

                <hr>
                <h1>2.子组件自有数据向父组件传递</h1>
                <h1>fatherdata num01：{{num01}}</h1>
                father: <button @click="addNumFoo">plus 1</button><br>               
                child02: <child02 @addNumFoo="addNumFoo"></child02>
                
                <hr>
                <h1>3.子组件通过$emit("xxx",xxx)修改父组件的原有数据</h1>
                <h1>fatherdata num02：{{num02}}</h1>
                father: <button @click="addNumFoo02">无操作别按</button><br>               
                child03: <child03 @addNumFoo02="addNumFoo02"></child03>
            </div>
            `,
            data(){
                return {
                    num01:01,
                    num02:02,
                }
            },
            methods:{
                // 1.父组件向子组件传递方法属性methods
                sayHello(){
                    console.log("hello!!");
                },

                // 2.子组件自有数据向父组件传递
                addNumFoo(){
                    return this.num01++;
                },

                // 3.子组件通过$emit("xxx",xxx)修改父组件的原有数据
                // 可以多个值
                addNumFoo02(childNum,childNum02,childNum03){
                    return this.num02 += childNum + childNum02;
                }
            }
        });

        // 子组件child01--------1.父组件向子组件传递方法属性methods 
        Vue.component('child01',{
            prop:[,],
            // 通过$emit()绑定有父组件，传递的method
            template:`
            <div>
                <button @click="$emit('sayHello')">click me too</button>
            </div>
            `,
        });

        // 子组件child02--------2.子组件自有数据向父组件传递 
        Vue.component('child02',{
            prop:[,],
            template:`
            <div>
                <button @click="$emit('addNumFoo')">child plus 1</button>
            </div>
            `,
        });

        // 子组件child03--------3.子组件通过$emit("xxx",xxx)修改父组件的原有数据
        Vue.component('child03',{
            prop:[,],
            template:`
            <div>
                <button @click="$emit('addNumFoo02',childNum,100,childNum03)">child plus {{childNum}}</button>
            </div>
            `,
            data(){
                return {
                    childNum:10,
                }
            },
        });

        new Vue({
            el:"#app01",
            data(){
                return {
                }
            },
        })
    
    </script>
    
</body>
</html>